<template>
  <!-- 通过class来定义样式 -->
  <div class="login-page">
    <div class="login-form">
      <span>欢迎登录小伟博客系统</span>
      <!-- :model="loginForm"表示绑定表单loginForm； -->
      <!-- auto-label-width表示开启表格中自动label宽度 -->
      <!-- 定义事件submit时，需要参数data,ev -->
      <a-form :model="loginForm" auto-label-width @submit="handleSubmit">
        <!-- field="username"表示绑定表单loginForm中的username -->
        <a-form-item
          hide-label
          field="username"
          :rules="[{ required: true, message: '请输入用户名' }]"
        >
          <!-- ui库中输入框，前缀与后缀；去掉allow-clear表示把输入框中的×去除 -->
          <a-input v-model="loginForm.username" placeholder="请输入用户名">
            <template #prefix>
              <icon-user />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item
          hide-label
          field="password"
          :rules="[
            { required: true, message: '请输入用密码' },
            { minLength: 6, message: 'must be greater than 6 characters' }
          ]"
        >
          <!-- ui库中密码输入框，不显示明文 -->
          <a-input-password v-model="loginForm.password" placeholder="请输入密码">
            <template #prefix>
              <!-- ui库中图标 -->
              <icon-lock />
            </template>
          </a-input-password>
        </a-form-item>
        <a-form-item hide-label>
          <!-- ui库中的按钮； -->
          <a-button html-type="submit" style="width: 100vw" type="primary">登录</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { LOGIN } from '../../api/token'
// 导入ui库中的：全局提示 Message
// import { Message } from '@arco-design/web-vue'
// 通过vue router库来获取一个router对象
import { useRouter } from 'vue-router'
import { state } from '../../stores/app'

// 定义表单数据
const loginForm = ref({
   //字段要和数据库中的字段对应上才行
  username: '', 
  password: ''
})
// 定义一个router对象
const router = useRouter()
// 提交表单过后的处理(handleSubmit),调用LOGIN来颁发token
// const handleSubmit = async(data,ev) =>{
const handleSubmit = async (data) => {
  console.log(data)
  // 通过观察日志输出data，可以看到data中errors的值；此时输入的密码格式不对就回直接退出，不会返回后端数据
  if (data.errors != undefined) {
    return
  }
  try {
    // LOGIN是一个Promise对象
    const resp = await LOGIN(loginForm.value)
    // 这里返回的resp，是经过拦截器处理后的返回值
    console.log(resp)
    state.value.is_login = true
    state.value.token = resp
    // console.log(response)
    // 登录token的数据返回后，需要跳转到后台页面, 所以要通过vue router库来获取一个router对象
    // name 路由的名称; router.push(也可以传入url路径)
    router.push({ name: 'BackendBlogs' })
  } catch (error) {
    // // 通过console.log(error)日志可以看到error的值
    // // console.log(error)
    // let msg = error.message
    // if (error.response.data && error.response.data.message){
    //      msg = error.response.data.message
    // }
    // // 注意符号：`登录失败：${msg}`
    // Message.error(`登录失败：${msg}`)

    // 通过定义拦截器后把代码改进如下
    // 就是Promise 的Reject 的error
    console.log(error)
  }
}
</script>

<style lang="css" scoped>
.login-page {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-form {
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 400px;
  width: 400px;
}
</style>
